<template>
	<view>
		<!-- 余额部分 -->
		<!-- <view class="fl-s-s p-r-30" style="margin-top: 36rpx;">
			<text class="fs-26 fm-ali" style="color: #999999;">佣金</text>
			<view class="fr-b-c w-1 m-t-10">
				<view class="fr-s-c fm-ali" style="color: #000000; align-items: baseline;">
					<text class="fs-36">￥</text>
					<text style="font-size: 66rpx;">{{nowMoney}}</text>
				</view>
			</view>
		</view> -->
		<!-- 提现部分 -->
		<view class="tx-box fl-s-s">
			<text class="fs-32 fm-ali" style="color: #000000;">提现至</text>
			<scroll-view scroll-x style="margin-top: 36rpx; white-space: nowrap;">
				<view @click="curType = index" :class="[index==curType?'item-act':'type-item','fr-c','relative']" v-for="(item,index) in types" :key="index">
					<image v-if="index==curType" src="/static/images/user/choosed_icon.png" style="width: 42rpx; height: 42rpx; position: absolute; left: 0; top: 0;" ></image>
					<image :src="item.img" style="width: 48rpx; height: 48rpx;"></image>
					<text class="fs-28 m-l-10">{{item.name}}</text>
				</view>
			</scroll-view>
		</view>
		<!-- 支付宝 -->
		<view class="ali-box w-1 fl-s-s p-r-30"  v-if="curType==2">
			<text class="ali-title">真实姓名</text>
			<input class="my-input w-1" v-model="real_name" type="text" placeholder="点击输入">
			<text class="ali-title">支付宝账号</text>
			<input class="my-input w-1" v-model="zfb_account" type="text" placeholder="点击输入">
			<text class="ali-title">提现金额</text>
			<input class="my-input w-1" disabled v-model="money" type="digit" placeholder="点击输入">
		</view>
		<!-- 微信 -->
		<view class="ali-box w-1 fl-s-s p-r-30" v-if="curType==1">
			<text class="ali-title">提现金额</text>
			<input class="my-input w-1" disabled v-model="money" type="digit" placeholder="点击输入">
			<text class="ali-title">微信收款码</text>
			<view class="fr-s-c m-t-30 ">
				<image @click="previewImage" v-if="wx_img" :src="wx_img" mode="aspectFill" class="m-r-20" style="width: 220rpx; height: 220rpx; border-radius: 8rpx;"></image>
				<view class="u-rela fl-c" @click="chooseImage" style="width: 220rpx; height: 220rpx; ">
					<image src="/static/images/user/uploads-img.png" mode="aspectFill" class="u-abso" style="width: 220rpx; height: 220rpx; border-radius: 8rpx;"></image>
					<text class="u-rela" style="margin-top: 70rpx; font-size: 24rpx; color: #999999;">上传图片</text>
				</view>
			</view>
		</view>
		<!-- 银行卡 -->
		<view class="ali-box w-1 fl-s-s p-r-30"  v-if="curType==0">
			<text class="ali-title">真实姓名</text>
			<input class="my-input w-1" v-model="real_name" type="text" placeholder="点击输入">
			<text class="ali-title">手机号</text>
			<input class="my-input w-1" type="text" v-model="mobile" placeholder="点击输入">
			<text class="ali-title">银行卡号</text>
			<input class="my-input w-1" type="number" v-model="bank_account" placeholder="点击输入">
			<text class="ali-title">银行名称</text>
			<input class="my-input w-1" type="text" v-model="bank_name" placeholder="点击输入">
			<text class="ali-title">银行卡开户行</text>
			<input class="my-input w-1" type="text" v-model="bank_type" placeholder="点击输入">
			<text class="ali-title">提现金额</text>
			<input class="my-input w-1" disabled v-model="money" type="digit" placeholder="点击输入">
		</view>
		<!-- 提交按钮 -->
		<view class="iphonex fr-c" style="background: #FFFFFF;">
			<view class="fr-c sub-btn" @click="subInfo">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text1: ['uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用'],
				types:[
					// {
					// 	name:'余额',
					// 	img:'/static/images/home/balance_pay_icon.png'
					// },
					{
						name:'银行卡',
						img:'/static/images/user/card_icon.png'
					},
					{
						name:'微信',
						img:'/static/images/user/we_icon.png'
					},
					{ 
						name:'支付宝',
						img:'/static/images/user/ali_icon.png'
					}
				],
				curType:0,
				real_name:'',  // 真实姓名
				zfb_account:'', // 支付宝账号
				wx_img:'',			// 微信首款吗
				bank_account:'',	// 银行卡号
				bank_name:'',			// 银行开户行
				money:'',// 提现数
				nowMoney:0,
				order:'',
				mobile:'',
				bank_type:'',
				bank_name:'',
				
			}
		},
		onLoad(options) {
			if(options.order){
				this.order = JSON.parse(options.order)
				console.log(this.order)
			}else{
				this.order = ''
			}
			if(options.ktx_price){
				this.money = options.ktx_price
			}
		},
		methods: {
			// 选择图片
			async chooseImage(){
				//#ifdef APP-PLUS
				let result = await this.$store.dispatch("quanxian/requestPermissions",'WRITE_EXTERNAL_STORAGE')
					console.log(result)
				if (result !== 1) return
				this.$store.state.isCAMERA = true
				// #endif
					
				let that = this
				uni.chooseImage({
					count: 1,
					success: res => {
						const tempFilePaths = res.tempFilePaths
						let fp_img = res.tempFilePaths[0]
						that.$api.get({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								console.log(updata)
								that.$api.upload({
									url: updata.data.uploadurl,
									filePath:fp_img,
									name: 'file',
									formData: updata.data.storage == 'local' ? null : updata.data.multipart,
									success: res => {
										let resinfo = JSON.parse(res)
										that.wx_img  = resinfo.data.fullurl
									}
								});
							}
						});
					}
				})
				
			},
			// 预览图片
			previewImage(){
				uni.previewImage({
					current:this.wx_img,
					urls:[this.wx_img]
				})
			},
					
			async subInfo(){
				let data = {}
				
				switch(this.curType/1){
					case 0:
						if(this.real_name == ''){
							uni.showToast({
								title:'请填写您的真实姓名',
								icon:'none'
							})
							return false
						}
						if(this.mobile == ''){
							uni.showToast({
								title:'请填写您的手机号',
								icon:'none'
							})
							return false
						}
						if(this.bank_account == ''){
							uni.showToast({
								title:'请填写您的银行卡号',
								icon:'none'
							})
							return false
						}
						if(this.bank_account == ''){
							uni.showToast({
								title:'请填写您的银行卡号',
								icon:'none'
							})
							return false
						}
						if(this.bank_name == ''){
							uni.showToast({
								title:'请填写您的银行名称',
								icon:'none'
							})
							return false
						}
						if(this.bank_type == ''){
							uni.showToast({
								title:'请填写您的银行卡开户行',
								icon:'none'
							})
							return false
						}
						if(this.money == ''){
							uni.showToast({
								title:'请填写您的金额',
								icon:'none'
							})
							return false
						}
						
						data = {
							type:1,
							channel:1,
							truename:this.real_name,
							card_number:this.bank_account,
							bank_name:this.bank_name,
							bank_type:this.bank_type,
							amount:this.money,
							mobile:this.mobile,
							goods_ids:this.order.goods_ids.join(','),
							ids:this.order.ids.join(','),
							tracking_number:this.order.tracking_number,
							image:this.order.QualificationsImgList.join(','),
							shop_address:this.order.shop_address,
							order_ids:this.order.order_ids.join(','),
							original_order_ids:this.order.original_order_ids.join(',')
						}
					break;
					case 1:
						if(this.money == ''){
							uni.showToast({
								title:'请填写您的金额',
								icon:'none'
							})
							return false
						}
						if(this.wx_img == ''){
							uni.showToast({
								title:'请上传您的收款码',
								icon:'none'
							})
							return false
						}
						data = {
							type:1,
							channel:2,
							wechat_image:this.wx_img,
							amount:this.money,
							goods_ids:this.order.goods_ids.join(','),
							ids:this.order.ids.join(','),
							tracking_number:this.order.tracking_number,
							image:this.order.QualificationsImgList.join(','),
							shop_address:this.order.shop_address,
							order_ids:this.order.order_ids.join(','),
							original_order_ids:this.order.original_order_ids.join(',')
						}
						
					break;
					case 2:
					if(this.real_name == ''){
						uni.showToast({
							title:'请填写您的真实姓名',
							icon:'none'
						})
						return false
					}
					
					if(this.zfb_account == ''){
						uni.showToast({
							title:'请填写您的支付宝账号',
							icon:'none'
						})
						return false
					}
					if(this.money == ''){
						uni.showToast({
							title:'请填写您的金额',
							icon:'none'
						})
						return false
					}
					data = {
						type:1,
						channel:3,
						truename:this.real_name,
						alipay_account:this.zfb_account,
						amount:this.money,
						goods_ids:this.order.goods_ids.join(','),
						ids:this.order.ids.join(','),
						tracking_number:this.order.tracking_number,
						image:this.order.QualificationsImgList.join(','),
						shop_address:this.order.shop_address,
						order_ids:this.order.order_ids.join(','),
						original_order_ids:this.order.original_order_ids.join(',')
						
					}
					break;
				}
				this.$post({
					url:'/wanlshop/withdrawal/save',
					data
				}).then(res=>{
					console.log(res)
					if(res.code == 1){
						uni.redirectTo({
							url:'/pages/BuyBack/tixianjilu/tixianjilu'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					
				})
			}
		}
	}
</script>

<style>
	>>>.u-icon__icon span{
		/* width: 0!important; */
		display: none!important;
	}
	>>>.u-notice-bar{
		padding: 0!important;
	}
	page{
		padding-bottom: 180rpx;
	}
	.tip-box {
		width: 750rpx;
		height: 60rpx;
		background: #fff6ec;
		padding-left: 32rpx;

	}

	.cz-btn {
		width: 148rpx;
		height: 56rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #CCCCCC;
		font-size: 26rpx;
		font-family: Alibaba;
		color: #999999;
	}
	.tx-box{
		padding-left: 32rpx;
		margin-top: 62rpx;
	}
	.type-item{
		width: 256rpx;
		height: 104rpx;
		display: inline-flex;
		margin-right: 26rpx;
		background: #F4F4F4;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: Alibaba;
		color: #666666;
	}
	

	.item-act{
		width: 256rpx;
		height: 104rpx;
		display: inline-flex;
		background: rgba(250, 54, 10, 0.08);
		border-radius: 8rpx;
		border: 2rpx solid #FA360A;
		border-radius: 8rpx;
		font-family: Alibaba;
		color: #333333;
		margin-right: 26rpx;
		font-size: 28rpx;
	}
	
	.ali-title{
		font-size: 32rpx;
		font-family: Alibaba;
		color: #000000;
		margin-top: 80rpx;
	}
	.my-input{
		height: 104rpx;
		background: #F4F4F4;
		border-radius: 8rpx;
		padding: 0 32rpx;
		margin-top: 36rpx;
	}
	.sub-btn{
		width: 686rpx;
		height: 100rpx;
		background: linear-gradient(246deg, #FA360A 0%, #FA8C0A 100%);
		box-shadow: 0rpx 6rpx 32rpx 2rpx rgba(250, 74, 20, 0.58);
		border-radius: 50rpx;
		font-size: 32rpx;
		font-family: Alibaba;
		color: #FFFFFF;
		margin-bottom: 30rpx;
	}
</style>
